<template>
  <el-container>
    <el-header v-if="detailStatus">
      <el-form ref="queryData" :model="queryData" inline size="mini" style="height: 30px;">
        <el-form-item prop="merchantName">
          <el-input v-model="queryData.merchantName" placeholder="商户名称" style="width: 120px;" />
        </el-form-item>
        <el-form-item prop="merchantCode">
          <el-input v-model="queryData.merchantCode" placeholder="商户号" style="width: 120px;" />
        </el-form-item>
        <el-form-item prop="activityId">
          <el-input v-model="queryData.activityId" placeholder="活动编号" style="width: 120px;" />
        </el-form-item>
        <el-form-item prop="activityName">
          <el-input v-model="queryData.activityName" placeholder="活动名称" style="width: 120px;" />
        </el-form-item>
        <el-form-item>
          <span>活动对象：</span>
          <el-select v-model="queryData.activityObj" placeholder="请选择">
            <el-option
              v-for="item in activityObjOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <span>活动类型：</span>
          <el-select v-model="queryData.activityType" placeholder="请选择">
            <el-option
              v-for="item in activityTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <span>活动状态：</span>
          <el-select v-model="queryData.status" placeholder="请选择">
            <el-option
              v-for="item in activityStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <span>创建时间：</span>
          <el-date-picker
            v-model="createTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          />
        </el-form-item>

        <el-form-item>
          <span>生效时间：</span>
          <el-date-picker
            v-model="startTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          />
        </el-form-item>

        <el-form-item>
          <span>结束时间：</span>
          <el-date-picker
            v-model="endTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" plain icon="el-icon-search" size="mini" @click="queryPageList">查询</el-button>
          <el-button type="info" icon="el-icon-refresh" size="mini" @click="reset('queryData')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main v-if="detailStatus" style="margin-top:100px">
      <el-table :data="pageTableData" border size="small" max-height="700">
        <el-table-column v-if="show" label="id" prop="id" header-align="center" align="center" width="65" />
        <el-table-column label="商户名称" prop="merchantName" header-align="center" align="center" width="120" />
        <el-table-column label="活动名称" prop="name" header-align="center" align="center" width="120" />
        <el-table-column label="活动编号" prop="merchantCode" header-align="center" align="center" width="80" />
        <el-table-column label="活动类型" prop="activityType" header-align="center" align="center" width="120">
          <template slot-scope="scope">
            　　　　　　　　<span v-if="scope.row.activityType=== 1">会员卡消费折扣</span>
            　　　　　　　　<span v-if="scope.row.activityType=== 2">会员卡充值满赠</span>
            <span v-if="scope.row.activityType=== 3">会员卡消费满赠</span>
          　　　　　　</template>
        </el-table-column>
        <el-table-column label="活动对象" prop="activityObj" header-align="center" align="center" width="120">
          <template slot-scope="scope">
　　　　　　　　<span v-if="scope.row.activityObj=== 1">新会员</span>
　　　　　　　　<span v-if="scope.row.activityObj=== 2">老会员</span>
　　　　　　</template>
        </el-table-column>
        <!--隐藏列-->
        <el-table-column v-if="show" label="活动规则" width="200">
          <el-row  v-for="(item, index) in activityForm.activityDetail" :key="index" >
            <span>会员卡折扣满</span>
            <span>{{item.ruleFull}}</span>
            <span>元，打</span>
            <span>{{item.ruleDiscount}}</span>
            <span>折</span>
          </el-row>
        </el-table-column>

        <el-table-column label="创建时间" prop="createTime" header-align="center" align="center" width="160" />
        <el-table-column label="生效时间" prop="startTime" header-align="center" align="center" width="160" />
        <el-table-column label="活动状" prop="status" header-align="center" align="center" width="65">
          <template slot-scope="scope">
　　　　　　　　<span v-if="scope.row.status=== 0">未启动</span>
　　　　　　　　<span v-if="scope.row.status=== 1">进行中</span>
　　　　　　</template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" header-align="center" align="center" min-width="200">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="queryCard(scope.row)"
            >查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer v-if="detailStatus" style="text-align: right">
      <el-pagination
        :current-page="queryData.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryData.totalCount"
        @size-change="pageSizeChange"
        @current-change="pageCurrentChange"
      />
    </el-footer>
    <div v-if="!detailStatus">
      <span>活动详情</span>
      <el-form :model="activityForm" style="margin-top:10px;background-color:rgb(231, 231, 231)">
        <el-form-item label="活动对象" :label-width="formLabelWidth" >
          <el-select :disabled="formDisabled" v-model="activityForm.activityObj" style="width:200px;" placeholder="请选择">
            <el-option
              v-for="item in activityObjOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <!-- <el-input v-model="activityForm.nickname" autocomplete="off"></el-input> -->
        </el-form-item>
        <el-form-item label="活动类型" :label-width="formLabelWidth">
          <el-select :disabled="formDisabled" v-model="activityForm.activityType"  style="width:200px;" placeholder="请选择">
            <el-option
              v-for="item in activityTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <!-- <el-input v-model="activityForm.cardNo" autocomplete="off"></el-input> -->
        </el-form-item>
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input :disabled="formDisabled" v-model="activityForm.name" placeholder="" style="width:200px;" />
          <!-- <el-input v-model="activityForm.mobile" autocomplete="off"></el-input> -->
        </el-form-item>
        <el-form-item label="活动规则" :label-width="formLabelWidth">
          <el-row v-for="(item,index) of activityForm.activityDetail" :key="index"> 
            <span>会员卡折扣满</span>
            <el-input :disabled="formDisabled" v-model="item.ruleFull" placeholder="" style="width:80px;" />
            <span>元，打</span>
            <el-input :disabled="formDisabled" v-model="item.ruleDiscount" placeholder="" style="width:80px;" />
            <span>折</span>
          </el-row>
          <!-- <el-button type="primary" :disabled="formDisabled" @click="addRule">添加规则</el-button> -->
        </el-form-item>
        
        <el-form-item label="生效时间" :label-width="formLabelWidth">
          <el-date-picker 
           style="width:200px;"
            v-if="editType===0||editType===1"
            :disabled="formDisabled"
            v-model="activityForm.startTime"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
          
          <!-- <el-input v-model="activityForm.startTime" placeholder="" style="width: 120px;" /> -->
        </el-form-item>
        <el-form-item label="结束时间" :label-width="formLabelWidth">
          <el-date-picker 
          style="width:200px;"
            v-if="editType===0||editType===1"
            :disabled="formDisabled"
            v-model="activityForm.endTime"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
          <!-- <el-input v-model="activityForm.endTime" placeholder="" style="width: 120px;" /> -->
        </el-form-item>

      </el-form>
      <span>操作记录</span>  
      <div style="margin-top:10px;background-color:rgb(231, 231, 231)">
        <el-table :data="editData" border size="small" max-height="700">
          <el-table-column label="创建时间" prop="user" header-align="center" align="center" width="120" />
          <el-table-column label="创建人" prop="editTime" header-align="center" align="center" width="200" />
          <el-table-column label="操作内容" prop="content" header-align="center" align="center" width="120" />
        </el-table>
      </div>
      <!-- <el-row v-if="editType==1">
        <el-row :gutter="20">
          <el-col :span="8">
            <span>创建时间：</span>
            <span>{{activityForm.createTime}}</span>
          </el-col>
          <el-col :span="8">
            <span>创建人：</span>
            <span>小天</span>
          </el-col>
          <el-col :span="8">
            <span>操作内容：</span>
            <span>去问人体</span>
          </el-col>
        </el-row>
      </el-row> -->
      <el-button type="primary" @click="returnActivityList">返回活动列表</el-button>
    </div> 
  </el-container>
</template>

<script>
import { memberAjax } from 'Ajax'
// import { delete } from 'vue/types/umd'
export default {
  name: 'MemberActivity',
  data() {
    return {
      editType:0,
      formDisabled:true,
      show:false,
      addType:'',
      detailStatus: true,
      formLabelWidth: '120px',
      activityEditVisible: false,
      show: false,
      editData:[
        {
          user: '商户1',
          editTime: '2021-04-25 11:36:30',
          content: '修改状态',
        },
        {
          user: '商户1',
          editTime: '2021-04-26 23:36:30',
          content: '修改状态',
        }
      ],
      pageTableData: [
        {
          id: 0,
          name: 'test1',
          merchantCode: '12345', // 需要确定后端返回字段名称
          activityType: 1,
          activityObj: 1,
          activityDetail:[{
            ruleFull: 1123456,
            ruleDiscount: 9,
          }],
          createTime: '2021-04-11 00:21:57',
          startTime: '2021-04-11 00:21:57',
          endTime: '2021-04-11 00:21:57',
          status: 1
        },
        {
          id: 1,
          name: 'test2',
          merchantCode: '12345', // 需要确定后端返回字段名称
          activityType: 1,
          activityObj: 1,
          activityDetail:[{
            ruleFull: 1123456,
            ruleDiscount: 9
          },{
            ruleFull: 11236,
            ruleDiscount: 7
          }],
          createTime: '2021-04-11 00:21:57',
          startTime: '2021-04-11 00:21:57',
          endTime: '2021-04-11 00:21:57',
          status: 1
        }
      ],
      activityForm: {
        id:0,
        activityObj: '',
        activityType: '',
        activityDetail:[
          {
            ruleFull: 11456,
            ruleDiscount: 8
          },
          {
            ruleFull: 1234567,
            ruleDiscount: 6
          }
        ],
        name: '',
        merchantCode: '',
        startTime: '',
        endTime: ''
      },
      queryData: {
        activityId: '', // 活动编号
        activityName: '', // 活动名称
        activityObj: '',
        activityType: '',
        status: '',
        createTimeStart: '',
        createTimeEnd: '',
        endTimeStart: '',
        endTimeEnd: '',
        startTimeStart: '',
        startTimeEnd: '',
        pageNum: 1,
        pageSize: 10,
        totalCount: 0
      },
      activityObjOptions: [
        {
          value: 1,
          label: '新会员'
        },
        {
          value: 2,
          label: '老会员'
        }
      ],
      activityTypeOptions: [
        {
          value: 1,
          label: '会员卡消费折扣'
        },
        {
          value: 2,
          label: '会员卡充值满赠'
        },
        {
          value: 3,
          label: '会员卡消费满赠'
        }
      ],
      activityStatusOptions: [
        {
          value: 0,
          label: '未启动'
        },
        {
          value: 1,
          label: '进行中'
        }
      ],
      createTime: '',
      startTime: '',
      endTime: '',
      activityData:[
        {

        }
      ]

    }
  },
  methods: {
    addRule(){
      if(this.activityForm.activityDetail && this.activityForm.activityDetail.length>2){
        this.$alert('最多添加三个规则', '', {
          confirmButtonText: '确定'
        });
      }else{
        const ruleParam = {
            ruleFull: '',
            ruleDiscount: ''
        }
        if(!this.activityForm.activityDetail){
          this.activityForm.activityDetail = []
        }
        this.activityForm.activityDetail.push(ruleParam)
      }
      
    },
    addActivity(){
      this.activityEditVisible = true
      this.editType = 0
      this.formDisabled = false
      this.activityForm.startTime = ''
      this.activityForm.endTime = ''
      this.activityForm.activityObj = ''
      this.activityForm.activityType = ''
      this.activityForm.activityDetail = []
      delete this.activityForm.id
    },
    activitySave(){
      this.activityEditVisible = false
      memberAjax.activitySave(this.activityForm).then(res => {
        this.activityData = res
      })
    },
    returnActivityList(){
      this.detailStatus = true
    },
    queryCard(row) {
      this.editType = 1
      this.detailStatus = false
      this.formDisabled = true
      memberAjax.activityDetailList({id:row.id}).then(res => {
        this.activityForm = res
      })
    },
    editCard(row) {
      this.activityEditVisible = true
      this.formDisabled = false
      this.editType = 1
      this.activityForm = row
    },
    deleteCard(scope,rows) {
       memberAjax.activityDelete({id:scope.row.id}).then(res => {
         rows.splice(scope.$index, 1);
      })
    },
    pageSizeChange(val) {
      this.queryData.pageSize = val
      this.queryPageList()
    },
    pageCurrentChange(val) {
      this.queryData.pageNum = val
      this.queryPageList()
    },
    queryPageList() {
      if (this.createTime && this.createTime.length>0) {
        this.queryData.createTimeStart = this.createTime[0].toLocaleString()
        this.queryData.createTimeEnd = this.createTime[1].toLocaleString()
      }else{
        this.queryData.createTimeStart = ''
        this.queryData.createTimeEnd = ''
      }

      if (this.startTime && this.startTime.length>0) {
        this.queryData.startTimeStart = this.startTime[0].toLocaleString()
        this.queryData.startTimeEnd = this.startTime[1].toLocaleString()
      }else{
        this.queryData.startTimeStart = ''
        this.queryData.startTimeEnd = ''
      }

      if (this.endTime && this.endTime.length>0) {
        this.queryData.endTimeStart = this.endTime[0].toLocaleString()
        this.queryData.endTimeEnd = this.endTime[1].toLocaleString()
      }else{
        this.queryData.endTimeStart = ''
        this.queryData.endTimeEnd = ''
      }
      memberAjax.activityList(this.queryData).then(res => {
        this.pageTableData = res.list
      })

    },
    reset(formName) {
      this.$refs[formName].resetFields();
      this.queryData.status = ''
      this.queryData.activityObj = ''
      this.queryData.activityType = ''
      this.queryData.createTimeStart = ''
      this.queryData.createTimeEnd = ''
      this.queryData.startTimeStart = ''
      this.queryData.startTimeEnd = ''
      this.queryData.endTimeStart = ''
      this.queryData.endTimeEnd = ''
      this.createTime=[]
      this.startTime=[]
      this.endTime=[]
    }
  }
}
</script>

<style scoped>
/* .detail{
  padding-left: 20px;
} */
.el-row{
  padding-top: 10px;
}
</style>
